<template>
  <div class="page">
    <!-- 搜索区域 -->
    <div class="search">
      <Entity-view formItemWidth="320px" form="form" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
        <form-item label="活动名称"/>
        <form-item label="参与机构">
          <a-tree-select
              :tree-data="orgList"
              placeholder="请输入代码或名称"
              :dropdown-style="{maxHeight: '200px'}"
              :dropdownMatchSelectWidth="true"
          />
        </form-item>
        <form-item label="活动状态" input-type="select" :options="activityStatusOptions"/>
        <form-item label="创建时间">
          <a-range-picker/>
        </form-item>
        <form-item label="创建人">
          <a-select
              :show-search="true"
              :value="value"
              placeholder="请输入创建人名称"
              :filter-option="false"
              not-found-content="没有找到匹配项"
              @search="handleSearch"
              @change="handleChange"
          >
            <a-select-option v-for="d in data" :key="d.value">
              {{ d.text }}
            </a-select-option>
          </a-select>
        </form-item>

      </Entity-view>

      <div class="row justify-center">
        <a-space>
          <a-button type="primary">查询</a-button>
          <a-button>重置</a-button>
        </a-space>
      </div>

    </div>
    <!-- 数据展示区域 -->
    <div class="content">

      <a-table :columns="tableColumns"
               :data-source="dataSource"
               :scroll="{x: true}"
               :pagination="pagination"
      >
        <template v-slot:action="record">
          <a-space>
            <a-icon class="action-icon" type="check-circle" theme="twoTone" twoToneColor="#4a9ff5" title="发布"
                    @click="publish(record)"/>
            <a-icon class="action-icon" type="pause-circle" theme="twoTone" twoToneColor="#4a9ff5" title="暂停"
                    @click="pause(record)"/>
            <a-icon class="action-icon" type="close-circle" theme="twoTone" twoToneColor="#4a9ff5" title="终止"
                    @click="finish(record)"/>
            <a-icon class="action-icon" type="play-circle" theme="twoTone" twoToneColor="#4a9ff5" title="启用"
                    @click="play(record)"/>
            <a-icon class="action-icon" type="eye" theme="twoTone" twoToneColor="#4a9ff5" title="详情"
                    @click="view(record)"/>
          </a-space>
        </template>
      </a-table>


    </div>
    <!-- 弹出框 -->
    <operation ref="operation"></operation>
  </div>
</template>

<script>
import EntityView from "@/components/common/entityView/EntityView";
import FormItem from "@/components/common/entityView/FormItem";
import fetchOrgList from "./fetchOrgList";
import operation from './MarketActiManageForCustOperation'

let timeout;
let currentValue;

function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
    console.log(currentValue);
    const data = [{value: 0, text: '测试银行1'}, {value: 1, text: '测试银行2'}]
    callback(data);
  }

  timeout = setTimeout(fake, 300);
}

export default {
  name: "MarketActiPublishForCust",
  components: {
    EntityView,
    FormItem,
    operation
  },
  mixins: [fetchOrgList],
  data() {
    return {
      search: {},
      value: undefined,
      activityStatusOptions: [
        {name: '草稿', value: 0},
        {name: '未发布', value: 1},
        {name: '进行中', value: 2},
        {name: '已暂停', value: 3},
        {name: '已结束', value: 4},
      ],
      tableColumns: [
        {title: '优惠活动名称', dataIndex: 'mcName', key: 'mcName'},
        {title: '优惠活动编号', dataIndex: 'mcNo', key: 'mcNo'},
        {title: '优惠方式', dataIndex: 'mcType', key: 'mcType'},
        {title: '活动起始日期', dataIndex: 'mcStartDate', key: 'mcStartDate'},
        {title: '活动终止日期', dataIndex: 'mcEndDate', key: 'mcEndDate'},
        {title: '出资方', dataIndex: 'sponsor', key: 'sponsor'},
        {title: '活动状态', dataIndex: 'mcStatusName', key: 'mcStatusName'},
        {title: '活动审核状态', dataIndex: 'auditStatus', key: 'auditStatus'},
        {title: '活动预算(元)', dataIndex: 'budget', key: 'budget'},
        {title: '已消耗预算(元)', dataIndex: 'budgetUsed', key: 'budgetUsed'},
        {title: '创建时间', dataIndex: 'createTime', key: 'createTime'},
        {
          title: '操作', fixed: 'right', key: 'operation',
          scopedSlots: {customRender: 'action'},
        },
      ],
      dataSource: [
        {
          mcName: "随机立减营销活动", // 优惠活动名称
          mcNo: 'MC013202112232021123100000000032', // 活动编号
          mcType: 1, // 满减类型
          mcTypeName: '满额立减随机金额', // 满减名称
          mcStartDate: '20211223', // 活动开始时间
          mcEndDate: '20211231', // 活动结束时间
          mcStatus: 2, // 活动状态
          mcStatusName: '进行中',
          sponsor: '商户全资免充值', // 出资方
          auditStatus: 2, // 活动审核状态
          auditStatusName: '发布-审批通过',
          budget: '20.00', // 活动预算
          budgetUsed: '0.00',
          createTime: '2021-12-22 17:23:47'
        }, {
          mcName: "随机立减营销活动", // 优惠活动名称
          mcNo: 'MC013202112232021123100000000032', // 活动编号
          mcType: 1, // 满减类型
          mcTypeName: '满额立减随机金额', // 满减名称
          mcStartDate: '20211223', // 活动开始时间
          mcEndDate: '20211231', // 活动结束时间
          mcStatus: 2, // 活动状态
          mcStatusName: '进行中',
          sponsor: '商户全资免充值', // 出资方
          auditStatus: 2, // 活动审核状态
          auditStatusName: '发布-审批通过',
          budget: '20.00', // 活动预算
          budgetUsed: '0.00',
          createTime: '2021-12-22 17:23:47'
        }, {
          mcName: "随机立减营销活动", // 优惠活动名称
          mcNo: 'MC013202112232021123100000000032', // 活动编号
          mcType: 1, // 满减类型
          mcTypeName: '满额立减随机金额', // 满减名称
          mcStartDate: '20211223', // 活动开始时间
          mcEndDate: '20211231', // 活动结束时间
          mcStatus: 2, // 活动状态
          mcStatusName: '进行中',
          sponsor: '商户全资免充值', // 出资方
          auditStatus: 2, // 活动审核状态
          auditStatusName: '发布-审批通过',
          budget: '20.00', // 活动预算
          budgetUsed: '0.00',
          createTime: '2021-12-22 17:23:47'
        }, {
          mcName: "随机立减营销活动", // 优惠活动名称
          mcNo: 'MC013202112232021123100000000032', // 活动编号
          mcType: 1, // 满减类型
          mcTypeName: '满额立减随机金额', // 满减名称
          mcStartDate: '20211223', // 活动开始时间
          mcEndDate: '20211231', // 活动结束时间
          mcStatus: 2, // 活动状态
          mcStatusName: '进行中',
          sponsor: '商户全资免充值', // 出资方
          auditStatus: 2, // 活动审核状态
          auditStatusName: '发布-审批通过',
          budget: '20.00', // 活动预算
          budgetUsed: '0.00',
          createTime: '2021-12-22 17:23:47'
        }, {
          mcName: "随机立减营销活动", // 优惠活动名称
          mcNo: 'MC013202112232021123100000000032', // 活动编号
          mcType: 1, // 满减类型
          mcTypeName: '满额立减随机金额', // 满减名称
          mcStartDate: '20211223', // 活动开始时间
          mcEndDate: '20211231', // 活动结束时间
          mcStatus: 2, // 活动状态
          mcStatusName: '进行中',
          sponsor: '商户全资免充值', // 出资方
          auditStatus: 2, // 活动审核状态
          auditStatusName: '发布-审批通过',
          budget: '20.00', // 活动预算
          budgetUsed: '0.00',
          createTime: '2021-12-22 17:23:47'
        },
      ],
      pagination: {
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
    }
  },
  methods: {
    publish(record) {
      console.log(record);
      this.$refs.operation.show({}, 'release');
    },
    pause(record) {
      console.log(record);
      this.$refs.operation.show({}, 'pause');
    },
    finish(record) {
      console.log(record);
      this.$refs.operation.show({}, 'finish');
    },
    play(record) {
      console.log(record);
      this.$refs.operation.show({}, 'play');
    },
    view(record) {
      console.log(record);
      this.$refs.operation.show({}, 'view');
    },
    handleSearch(value) {
      fetch(value, data => (this.data = data));
    },
    handleChange(value) {
      console.log(value);
      this.value = value;
      fetch(value, data => (this.data = data));
    }
  }
}

</script>

<style scoped>
.page{
  width: 100%;
}
.row {
  display: flex;
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.content {
  margin-top: 20px;
}

.action-icon {
  font-size: 18px;
}
</style>
